<template>
  <h3>{{count}}</h3>
  <h3>{{showMsg()}}</h3>
  <button @click="showMsg">测试</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'App',
  beforeCreate () { // 生命周期钩子
    console.log('beforeCreate()')
  },
  // 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
  // 组合API:我们可以理解为,内部可以放很多的组合
  setup() {
    console.log('setup()', this) // 在beforeCreate之前执行,this必然是undefined
    // 普通变量---虽然能够在页面中使用,但是,这玩意儿不是响应式的数据,意义不是特别大
    let count = 100
    const showMsg =()=>{
      console.log('我喜欢吃大豆腐沾臭豆腐拌蒜,豪哥说')
    }
    return {
      count,
      showMsg
    }
  }
})
</script>
